<template>
  <div class="export-data">
    <popup ref="popupRef" title="打印预览" :async="true" width="1272" :confirm-button-text="false"
           :cancel-button-text="false" @open="openPage">

      <template #trigger>
        <el-button type="primary">{{ buttonText }}</el-button>
      </template>

      <div id="print_bill" class="single-border">
        <table v-for="(item, index) in printData.printLists" :key="index" style="width: 1200px;">
          <tr>
            <td v-for="(title_val, title_key) in printData.printKeyword" :key="title_key"
                :class="title_val.title_class">
              {{ title_val.title }}
            </td>
          </tr>

          <tr>
            <td v-for="(print_val, print_key) in printData.printKeyword" :key="print_key"
                :class="print_val.value_class">
              <el-text v-if="print_val.value === 'index'">{{ index + 1 }}</el-text>
              <el-text v-else>{{ item[print_val.value] }}</el-text>
            </td>
          </tr>
        </table>
      </div>
      <el-button type="primary" v-print="printObj">确定打印</el-button>
    </popup>
  </div>
</template>

<script lang="ts" setup>

import Popup from "@/components/popup/index.vue";
import type {PropType} from 'vue'
import {reactive} from "vue";

const popupRef = shallowRef<InstanceType<typeof Popup>>()
const emit = defineEmits(['success', 'close'])

const openPage = async () => {
  getPrintLists();
}

const parentData = defineProps({
  buttonText: {
    type: String,
    default: '打印'
  },
  getListsUrl: {
    type: Function,
    required: true
  },
  queryParams: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({})
  },
})

const printData = reactive({
  print_keyword: [],
  print_lists: [],
})

const getPrintLists = async () => {
  const print_res = await parentData.getListsUrl(parentData.queryParams)
  printData.print_keyword = print_res.keyword
  printData.print_lists = print_res.lists
}

const printObj = ref({
  id: 'print_bill',
  popTitle: '',
  extraCss:
      'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css,' +
      'https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css',

  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',

  previewBeforeOpenCallback() {
    console.log('正在加载预览窗口')
  },

  previewOpenCallback() {
    console.log('已经加载完预览窗口')
  },

  beforeOpenCallback(vue: any) {
    //   vue.printLoading = true
    console.log('打开之前')
  },

  openCallback(vue: any) {
    //   vue.printLoading = false
    console.log('执行了打印')
  },

  closeCallback() {
    console.log('关闭了打印工具')
  },

  clickMounted(vue: any) {
    console.log('点击了打印按钮')
    emits('Closeprint')
    // vue.printSet.popTitle = vue.tableHead // 动态设置页眉
  }
})

</script>


<style scoped>
.print_w1 {
  width: 80px;
}

.print_w2 {
  width: 240px;
}

.print_w3 {
  width: 110px;
}

.print_pa_ud_w1 {
  width: 100px;
}

.print_pa_ud_w2 {
  width: 150px;
}

.print_pa_ud_w3 {
  width: 110px;
}

.single-border table {
  border-collapse: collapse; /*合并边框*/
  width: 100%; /*设置表格宽度*/
  border-top: 1px solid black;
}

.single-border th, .single-border td {
  text-align: center;
  line-height: 30px;
}
</style>

